<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>node | 个人博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="code 12345678910111213141516171819202122232425262728293031323334353637383940&#x2F;&#x2F; let str &#x3D; require(&amp;#x27;.&#x2F;test.js&amp;#x27;);&#x2F;&#x2F; 1) 要读取文件内容&#x2F;&#x2F; 2) 包装函数&#x2F;&#x2F; 3) 默认返回module.exportsconst path &#x3D; require(&amp;#x27;path&amp;">
<meta property="og:type" content="article">
<meta property="og:title" content="node">
<meta property="og:url" content="https://gitee.com/wieldy/bailment-blog/2022/03/29/node/index.html">
<meta property="og:site_name" content="个人博客">
<meta property="og:description" content="code 12345678910111213141516171819202122232425262728293031323334353637383940&#x2F;&#x2F; let str &#x3D; require(&amp;#x27;.&#x2F;test.js&amp;#x27;);&#x2F;&#x2F; 1) 要读取文件内容&#x2F;&#x2F; 2) 包装函数&#x2F;&#x2F; 3) 默认返回module.exportsconst path &#x3D; require(&amp;#x27;path&amp;">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2022-03-29T14:12:00.000Z">
<meta property="article:modified_time" content="2023-04-23T12:11:43.652Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/bailment-blog/atom.xml" title="个人博客" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/bailment-blog/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/bailment-blog/css/style.css">

  
    
<link rel="stylesheet" href="/bailment-blog/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 6.3.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/bailment-blog/" id="logo">个人博客</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/bailment-blog/">Home</a>
        
          <a class="main-nav-link" href="/bailment-blog/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/bailment-blog/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://gitee.com/wieldy/bailment-blog"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-node" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2022/03/29/node/" class="article-date">
  <time class="dt-published" datetime="2022-03-29T14:12:00.000Z" itemprop="datePublished">2022-03-29</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="p-name article-title" itemprop="headline name">
      node
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <ul>
<li><p>code</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// let str = require(&#x27;./test.js&#x27;);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1) 要读取文件内容</span></span><br><span class="line"><span class="comment">// 2) 包装函数</span></span><br><span class="line"><span class="comment">// 3) 默认返回module.exports</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>); <span class="comment">// 处理路径</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// join / resolve 用的时候可以混用</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(path.<span class="title function_">join</span>(<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;..&#x27;</span>, <span class="string">&#x27;/&#x27;</span>))</span><br><span class="line"></span><br><span class="line"><span class="comment">// 根据已经有的路径来解析绝对路径， 可以用他来解析配置文件</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(path.<span class="title function_">resolve</span>(<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;/&#x27;</span>)); <span class="comment">// resolve 不支持/ 会解析成根路径</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(path.<span class="title function_">join</span>(__dirname, <span class="string">&#x27;a&#x27;</span>))</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(path.<span class="title function_">extname</span>(<span class="string">&#x27;1.js&#x27;</span>))</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(path.<span class="title function_">dirname</span>(__dirname)); <span class="comment">// 解析父目录</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>); <span class="comment">// file system</span></span><br><span class="line"><span class="comment">// 同步读取</span></span><br><span class="line"><span class="keyword">let</span> content = fs.<span class="title function_">readFileSync</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;test.js&#x27;</span>), <span class="string">&#x27;utf8&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(content);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> exists = fs.<span class="title function_">existsSync</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;test1.js&#x27;</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(exists);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> vm = <span class="built_in">require</span>(<span class="string">&#x27;vm&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 我的目的是让字符串变成可以执行的代码, 想让字符串执行 不能采用eval， 会有上下文依赖问题，</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">eval</span>(<span class="string">&#x27;console.log()&#x27;</span>);  <span class="comment">// new Function 可以创造一个顶级的函数，也没有上下文的问题。 但是node中没有使用他</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = <span class="number">1</span></span><br><span class="line">vm.<span class="title function_">runInThisContext</span>(<span class="string">&quot;a = 100&quot;</span>); <span class="comment">// 沙箱，独立的环境</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line"></span><br><span class="line"><span class="comment">// join resolve dirname</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li><p>module</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vm = <span class="built_in">require</span>(<span class="string">&#x27;vm&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; dir &#125; = <span class="built_in">require</span>(<span class="string">&#x27;console&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Module</span>(<span class="params">id</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">id</span> = id;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">exports</span> = &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Module</span>.<span class="property">_extensions</span> = &#123;</span><br><span class="line">    <span class="string">&#x27;.js&#x27;</span>(<span class="variable language_">module</span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> content = fs.<span class="title function_">readFileSync</span>(<span class="variable language_">module</span>.<span class="property">id</span>, <span class="string">&#x27;utf8&#x27;</span>);</span><br><span class="line">        <span class="keyword">let</span> wrapperFn = vm.<span class="title function_">compileFunction</span>(content, [</span><br><span class="line">            <span class="string">&#x27;exports&#x27;</span>, <span class="string">&#x27;require&#x27;</span>, <span class="string">&#x27;module&#x27;</span>, <span class="string">&#x27;__filename&#x27;</span>, <span class="string">&#x27;__dirname&#x27;</span></span><br><span class="line">        ]);</span><br><span class="line">        <span class="keyword">let</span> <span class="built_in">exports</span> = <span class="variable language_">this</span>.<span class="property">exports</span>;</span><br><span class="line">        <span class="keyword">let</span> thisValue = <span class="built_in">exports</span></span><br><span class="line">        <span class="keyword">let</span> <span class="built_in">require</span> = req;</span><br><span class="line">        <span class="keyword">let</span> filename = <span class="variable language_">module</span>.<span class="property">id</span></span><br><span class="line">        <span class="keyword">let</span> dirname = path.<span class="title function_">dirname</span>(filename);</span><br><span class="line"></span><br><span class="line">        <span class="title class_">Reflect</span>.<span class="title function_">apply</span>(wrapperFn, thisValue, [<span class="built_in">exports</span>, <span class="built_in">require</span>, <span class="variable language_">module</span>, filename, dirname])</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">&#x27;.json&#x27;</span>() &#123; &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Module</span>.<span class="property">_resolveFilename</span> = <span class="keyword">function</span> (<span class="params">id</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> filepath = path.<span class="title function_">resolve</span>(id);</span><br><span class="line">    <span class="keyword">if</span> (fs.<span class="title function_">existsSync</span>(filepath)) <span class="keyword">return</span> filepath</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> exts = <span class="title class_">Object</span>.<span class="title function_">keys</span>(<span class="title class_">Module</span>.<span class="property">_extensions</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 尝试添加后缀</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; exts.<span class="property">length</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">let</span> file = filepath + exts[i];</span><br><span class="line">        <span class="keyword">if</span> (fs.<span class="title function_">existsSync</span>(file)) <span class="keyword">return</span> file</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;Cannot find module:&#x27;</span> + id)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Module</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">load</span> = <span class="keyword">function</span> (<span class="params">filename</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> ext = path.<span class="title function_">extname</span>(filename);</span><br><span class="line">    <span class="title class_">Module</span>.<span class="property">_extensions</span>[ext](<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">req</span>(<span class="params">id</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> absPath = <span class="title class_">Module</span>.<span class="title function_">_resolveFilename</span>(id);</span><br><span class="line">    <span class="keyword">const</span> <span class="variable language_">module</span> = <span class="keyword">new</span> <span class="title class_">Module</span>(absPath);</span><br><span class="line">    <span class="variable language_">module</span>.<span class="title function_">load</span>(absPath)</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">module</span>.<span class="property">exports</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> str = <span class="title function_">req</span>(<span class="string">&#x27;./test&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 怎么调试代码vscode</span></span><br><span class="line"><span class="comment">// 添加 launch.json 文件，并且取消忽略源代码</span></span><br><span class="line"><span class="comment">// 知道调试的文件， 在对应的地方打断点</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 看源码 先掌握核心思路 之后在写个mini版本的</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1) require 一个模块 默认会调用Module._load方法</span></span><br><span class="line"><span class="comment">// 2) Module._resolveFilename 解析文件名 默认会自动添加.js,.json  要文件名的目的就是为了能读取文件</span></span><br><span class="line"><span class="comment">// 3) 创建当前模块的实例 const module =  new Module() =&gt; &#123;id:文件名,exports:&#123;&#125;&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4） module.load 根据刚才得到的文件名来进行模块的加载</span></span><br><span class="line"><span class="comment">//      5)  根据文件的后缀调用注册的方法（策略模式）</span></span><br><span class="line"><span class="comment">//      6)  加载js文件， 读取文件的内容</span></span><br><span class="line"><span class="comment">//      7)  module._compile 给读取到的内容包装函数  vm.compileFunction()   &#x27;exports&#x27;, &#x27;require&#x27;, &#x27;module&#x27;,&#x27;__filename&#x27;, &#x27;__dirname&#x27;,</span></span><br><span class="line"><span class="comment">// 8) 就是执行这个函数将module传递给用户  （用户会手动的给module.exportsf赋值）</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 9）最终返回的就是 module.exports</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//test.js</span></span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;hello world&#x27;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = str</span><br></pre></td></tr></table></figure>

<p>消息队列 其实在内部是有多个队列的， 理解的时候 我们说宏任务只有一个<br>一个任务队列（集合）是有多个队列组成的  每个队列中有多个任务<br>选择要执行的队列</p>
<blockquote>
<p>我们直接理解成只有一个宏任务队列（其实是有多个的）</p>
</blockquote>
<p>微任务是一个独立的队列  每次宏任务会产生一个微任务队列</p>
<h2 id="node-概念是什么，-是什么东西-，能做哪些事"><a href="#node-概念是什么，-是什么东西-，能做哪些事" class="headerlink" title="node 概念是什么， 是什么东西 ，能做哪些事"></a>node 概念是什么， 是什么东西 ，能做哪些事</h2><p>node不是语言，是一个运行时 （提供了一个js的运行环境） js的组成部分（ECMAScript、DOM、BOM） 在node中支持 ECMAScript， node中增添了很多内置的模块各种各样的功能 + 第三方模块</p>
<blockquote>
<p>简单理解 js + 内置的模块 + 别人写好的模块</p>
</blockquote>
<h2 id="js特点是主线程是单线程的"><a href="#js特点是主线程是单线程的" class="headerlink" title="js特点是主线程是单线程的"></a>js特点是主线程是单线程的</h2><p>多线程和单线程的区别  java  node</p>
<blockquote>
<p>多线程语言，多个请求到来的时候 需要开启对应的线程来进行处理 （线程池，解决防止开启大量线程，浪费内存） 超过处理个数后需要等待 （好处就是每一个人都能处理复杂的逻辑）  比较适合cpu密集型 （压缩，解密，加密） 后面的请求处理不用等待第一个人的处理  （同时操作同一个资源需要上锁）   同步阻塞</p>
</blockquote>
<blockquote>
<p>单线程的特点就是第一个处理后处理第二个（节约内存，不需要开启线程），  如果第一个人处理完后，会通知线程回来处理  适合io密集型（异步） 稍后完成了在回来处理（事件通知 ） 底层有一个事件环的机制    文件读取写入 （web开发） Nginx （单线程模型）  单线程（没有锁的概念）  异步非阻塞，完成后通知我</p>
</blockquote>
<p>同步&#x2F;异步    阻塞&#x2F;非阻塞</p>
<blockquote>
<p>阻塞非阻塞指代的是调用方的状态   同步异步指代的是被调用的状态</p>
</blockquote>
<p>多线程，单线程，阻塞非阻塞，同步和异步  （webpack多线程打包） </p>
<h2 id="node使用场景？"><a href="#node使用场景？" class="headerlink" title="node使用场景？"></a>node使用场景？</h2><ul>
<li>服务端, 我们目前多数采用中间层 （前后端分离的项目：可以解决跨域问题，可以做数据处理）</li>
<li>工具 gulp webpack vite 微前端工程化而生  node对js支持</li>
<li>ssr 服务端渲染  （vue和react来做处理） -》 node来做</li>
</ul>
<h2 id="模块的问题"><a href="#模块的问题" class="headerlink" title="模块的问题"></a>模块的问题</h2><ul>
<li>为什么要有模块化 （方便维护，高内聚低耦合，变量冲突问题） 前端可以通过单例模式来解决</li>
<li>js实现模块化可以采用函数来进行分割 ， node中也是采用函数来进行模块划分的</li>
<li>cmd(seajs) amd(require) umd(支持amd ，cmd的) iife （自执行函数） commonjs （require module.exports） es6 (import export ) systemjs (微前端 jsonp)….  规范</li>
</ul>
<blockquote>
<p>前端 es6Module   后端 commonjs  (后端也慢慢的开始转向es6模块了)</p>
</blockquote>
<h2 id="commonjs规范"><a href="#commonjs规范" class="headerlink" title="commonjs规范"></a>commonjs规范</h2><ul>
<li>每个js文件都是一个模块</li>
<li>每个模块想去引用别人的模块 需要采用require语法</li>
<li>每个模块想被别人使用需要采用 module.exports 导出</li>
</ul>
<h2 id="内置模块"><a href="#内置模块" class="headerlink" title="内置模块"></a>内置模块</h2><blockquote>
<p>天生的与生俱来的</p>
</blockquote>
<h2 id="文件模块"><a href="#文件模块" class="headerlink" title="文件模块"></a>文件模块</h2>
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2022/03/29/node/" data-id="cljmgj1ey000mzc9jd8g7ge1i" data-title="node" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/bailment-blog/2022/03/29/mongo%E6%A6%82%E5%BF%B5/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          mongo概念
        
      </div>
    </a>
  
  
    <a href="/bailment-blog/2022/03/29/stream/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">stream</div>
    </a>
  
</nav>

  
</article>


</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/07/">July 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/06/">June 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/04/">April 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/03/">March 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2022/03/">March 2022</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/bailment-blog/2023/07/03/%E5%B7%A5%E4%BD%9C%E6%97%A5%E5%BF%97/">工作日志</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/29/payMent/">payMent</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/20/%E7%BD%91%E7%BA%A2%E9%9D%A2%E8%AF%95%E9%A2%98/">原理题</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/19/%E5%89%8D%E7%AB%AF%E5%A4%A7%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E6%96%B9%E6%B3%95/">前端大屏自适应方法</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/17/10%E4%B8%AAJavaScript%E5%B8%B8%E8%A7%81%E9%AB%98%E7%BA%A7%E7%9F%A5%E8%AF%86%E7%82%B9/">10个JavaScript常见高级知识点</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2023 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/bailment-blog/" class="mobile-nav-link">Home</a>
  
    <a href="/bailment-blog/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/bailment-blog/js/jquery-3.4.1.min.js"></script>



  
<script src="/bailment-blog/fancybox/jquery.fancybox.min.js"></script>




<script src="/bailment-blog/js/script.js"></script>





  </div>
</body>
</html>